import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const CompileLinkView = defineView({
  controller: class CompileLinkCtrl {
    static $inject = ["$scope"];

    /**
     * @param {ng.WIScope} $scope
     * @param {ng.ITimeoutService} $timeout
     */
    constructor($scope, $timeout) {
      this.$scope = $scope;
      this.$timeout = $timeout;
    }

    formHtml = "";

    // 模拟动态加载的表单 HTML
    $onInit() {
      this.loadForm();
    }

    // 加载表单的方法
    loadForm = () => {
      // 这里可以添加实际的加载逻辑，例如从服务器获取 HTML
      if (this.formHtml) return;
      this.formHtml = html`<input
          type="text"
          class="form-control"
          ng-model="$ctrl.formData"
        />
        <button ng-click="$ctrl.submitForm($event)">Submit</button>`;
      console.log("Form loaded");
    };

    // 表单提交方法
    /**
     * @param {ng.IAngularEvent} e
     */
    submitForm = (e) => {
      console.log("e", e);
      this.formHtml = "";
      console.log("Form submitted");
    };
  },
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div>
      <button ng-click="$ctrl.loadForm()">Load Form</button>
      <p>{{$ctrl.formData}}</p>
      <div dynamic-form="$ctrl.formHtml" ctrl="$ctrl"></div>
    </div>
  `,
});

export default CompileLinkView;
